<template>
  <div class="cms-filter" :class="`style_${type}`">
    <div class="filter" v-if="!novel">
      <div
        v-for="(item, index) in filter.hotFilter"
        :key="index"
        class="choice-item"
        :class="{ 'choice-all': index === 0 }"
      >
        {{ item.label }}
      </div>
    </div>
    <div class="filter" v-if="novel">
      <div
        v-for="(item, index) in filter.novelFilter"
        :key="index"
        class="choice-item"
        :class="{ 'choice-all': index === 0 }"
      >
        {{ item.label }}
      </div>
    </div>
    <div class="filter">
      <div
        v-for="(item, index) in filter.areaFilter"
        :key="index"
        class="choice-item"
        :class="{ 'choice-all': index === 0 }"
      >
        {{ item.label }}
      </div>
    </div>
    <div class="filter" v-if="!novel">
      <div
        v-for="(item, index) in filter.typeFilter"
        :key="index"
        class="choice-item"
        :class="{ 'choice-all': index === 0 }"
      >
        {{ item.label }}
      </div>
    </div>
    <div class="filter" v-if="!novel">
      <div
        v-for="(item, index) in filter.dateFilter"
        :key="index"
        class="choice-item"
        :class="{ 'choice-all': index === 0 }"
      >
        {{ item.label }}
      </div>
    </div>
    <div class="filter" v-if="novel">
      <div
        v-for="(item, index) in filter.novelHotFilter"
        :key="index"
        class="choice-item"
        :class="{ 'choice-all': index === 0 }"
      >
        {{ item.label }}
      </div>
    </div>
    <div class="filter">
      <div
        v-for="(item, index) in filter.chargeFilter"
        :key="index"
        class="choice-item"
        :class="{ 'choice-all': index === 0 }"
      >
        {{ item.label }}
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import cmsFilterViewProps from './props'
// import { SyncOutlined, RightOutlined } from '@ant-design/icons-vue'
import filter from './dataSource'

export default defineComponent({
  props: cmsFilterViewProps,

  components: {
    // SyncOutlined,
    // RightOutlined
  },
  setup() {
    return {
      baseUrl: '/src/components/cms/components/',
      filter
    }
  }
})
</script>
<style scoped lang="less">
.cms-filter {
  width: 375px;
  padding: 8px 16px;
  background-color: #fff;
  @apply flex flex-col gap-y-3 overflow-x-hidden;
  .filter {
    width: 400px;
    @apply flex justify-start;
  }
  .choice-item:nth-child(2) {
    margin-left: 14px;
  }
  .choice-item {
    width: 28px;
    height: 28px;
    line-height: 28px;
    font-size: 14px;
    color: #48494d;
    text-align: center;
    letter-spacing: 0;
    font-weight: 500;
    margin-left: 28px;
  }
  &.style_1 {
    .choice-all {
      width: 56px;
      height: 28px;
      line-height: 28px;
      background: rgba(255, 97, 63, 0.1);
      color: #ff613f;
      margin-left: 0;
      border-radius: 16px;
    }
  }
  &.style_2 {
    .choice-all {
      width: 56px;
      height: 28px;
      border: 1px solid #ff613f;

      color: #ff613f;
      margin-left: 0;
      border-radius: 4px;
    }
  }
  &.style_3 {
    .choice-all {
      // width: 56px;
      height: 28px;
      color: #ff613f;
      margin-left: 0;
    }
    .choice-item:nth-child(2) {
      margin-left: 28px;
    }
  }
}
</style>
